<template>
	<div>
		<div class="aid">
			<div class="base">
				<p class="fixed-top">
					上传附件
					<a-icon @click="closeFunction" type="close" />
				</p>
				<div class="main">
					<a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }" @submit="handleSubmit">
						<a-form-item label="附件名称">
							<a-input v-decorator="['Name', { rules: [{ required: true, message: '附件名称不能为空' }] }]" />
						</a-form-item>
						<a-form-item label="附件类型 ">
							<a-select :allowClear="true"
								v-decorator="['Type', { rules: [{ required: true, message: '请选择附件类型' }] }]"
								placeholder="全部" optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in fileTypeData" :key="item.ID" :value="item.Key">
									{{item.Value}}
								</a-select-option>
							</a-select>
						</a-form-item>
						
					<!-- 	<a-form-item label="附件">
							<a-upload
								v-decorator="['Ico', { rules: [{ required: true, message: '附件不能为空' }] }]"
								:action="requestUrl + 'Common/DoUploadFile?type=file'"
								:file-list="icofileList"
								@change="e => icohandleChange(e, 'Ico')"
							>
								<div v-if="icofileList.length < 1" :disabled="showstate">
									<a-button>
										<a-icon type="upload" />
										上传
									</a-button>
								</div>
							</a-upload>
						</a-form-item> -->
						<a-form-item class="fixed-bottom" :wrapper-col="{ span: 12, offset: 5 }">
							<a-button type="primary" html-type="submit">确定</a-button>
						</a-form-item>
					</a-form>
				</div>
				<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"><img alt="example"
						style="width: 100%" :src="previewImage" /></a-modal>
			</div>
		</div>
	</div>
</template>

<script>
	import moment from 'moment';
	import Func from '@/utils/func';
	import {
		ManagePracticeSessionDeclareFileDoAdd,
		CommonDoGetPracticeSessionDeclareFileTypList,
		ManagePracticeSessionDeclareFileDoUpdate
	} from '@/api/follow';
	const data = [];
	export default {
		components: {},
		props: {
			ID: String,
			text: Object,
		},
		watch: {
			text: function(text) {
				console.log(text);
				let that = this;
				if (JSON.stringify(text) == '{}') {
					that.currentID = ''
				} else {
					that.currentID = text.ID;
					this.$nextTick(() => {
						setTimeout(function() {
							that.form.setFieldsValue({
								Name: text.Name,
								Type:text.Type
							});
						}, 300);
					})
			
				}
			}
		},
		data() {
			return {

				icofileList: [],
				fileList: {},
				previewVisible: false,
				previewImage: '',
				fileList1: [],
				previewVisible1: false,
				previewImage1: '',
				data,
				formLayout: 'horizontal',
				form: this.$form.createForm(this, {
					name: 'coordinated'
				}),
				showstate: true,
				formValue: {},
				dataValue: {},
				rules: {},
				ActivityTypeList: [],
				requestUrl: this.global.requestUrl,
				fileTypeData: [],
			};
		},
		computed: {},
		created() {
			this.getOther();
		},
		mounted() {},
		methods: {
			moment,
			closeFunction(data) {
				this.icofileList = [];
				this.form.resetFields();
				this.$emit('closeFun', data);
			},
			handleCancel() {
				this.previewVisible = false;
				this.previewImage = '';
			},
			async getOther() {
				let res = await CommonDoGetPracticeSessionDeclareFileTypList();
				this.fileTypeData = res.data.data;
			},
			async handlePreview(file) {
				this.previewImage = this.requestUrl + file.response.url;
				window.open(this.previewImage, '_blank')
				// let nameType = file.name.substr(file.name.lastIndexOf('.') + 1)
				// if(this.global.imgTypeList.findIndex(m=>{return m==nameType})<0){
				// 	this.$message.error('该文件格式不支持预览')
				// 	return false
				// }
				// this.previewImage = this.requestUrl + file.response.url;
				// this.previewVisible = true;
			},
			icohandleChange({
				fileList
			}, name) {
				this.icofileList = fileList;
			},
			handleChange(info, name) {
				let {
					fileList
				} = info;
				const status = info.file.status;
				if (status === 'done') {
					if (info.file.response.code == 0) {
						this.$message.success(info.file.response.msg)
						this.fileList[name] = [...fileList]; //重点
					} else {
						this.$message.error(info.file.response.msg)
						this.fileList[name] = this.fileList[name].splice(this.fileList[name].length - 1, 1)
					}
				}
				this.fileList[name] = [...fileList]; //重点
			},
			dataChange(e, name, type) {
				if (type == 'data') {
					let time = moment(e).format('YYYY-MM-DD HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				} else {
					let time = moment(e).format('HH:mm:ss');
					this.dataValue = Object.assign(this.dataValue, {
						[name]: time
					});
				}
			},
			handleSubmit(e) {
				let that = this;
				e.preventDefault();
				this.form.validateFields(async (err, values) => {
					if (!err) {
						let data = {};
						let arr1 = [];
						data.SessionDeclareID = this.ID;
						// for (let m = 0; m < this.icofileList.length; m++) {
						// 	if (this.icofileList[m].url) {
						// 		if (this.icofileList[m].url.indexOf(this.requestUrl) > -1) {
						// 			this.icofileList[m].url = this.icofileList[m].url.substring(this.requestUrl
						// 				.length);
						// 		}
						// 		arr1.push(this.icofileList[m].url);
						// 	} else {
						// 		arr1.push(this.icofileList[m].response.url);
						// 	}
						// }
						// data.FilePath = arr1.join(',');
						 data.Name = values.Name;
						data.Type=values.Type;
						let res={}
						if (!this.currentID) {
							res = await ManagePracticeSessionDeclareFileDoAdd(data);
						} else {
							data.ID = this.currentID;
							res = await ManagePracticeSessionDeclareFileDoUpdate(data);
						}
						
						if (res.data.code == 0) {
							this.$emit('closeFun');
							that.$message.success(res.data.msg);
						} else {
							that.$message.error(res.data.msg);
						}
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		margin: 20px 50px;
	}

	/deep/.ant-form-item-label {
		width: 100px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: right;
	}

	/deep/.ant-form-item-control-wrapper {
		flex: 1;
	}

	/deep/.ant-calendar-picker,
	/deep/.ant-time-picker {
		width: 100%;
	}

	/deep/.ant-form {
		margin-top: 50px;
		padding-bottom: 50px;
	}

	.titletip {
		padding-left: 10px;
		font-size: 12px;
		color: red;
	}
</style>
